<template>
	<view class="start-page">
	  <!-- 左上角手势图标 -->
	  <image class="hand-icon left" 
			 :class="{ 'animate-left': showLeft }" 
			 src="/static/images/hand.png" 
			 mode="aspectFit">
	  </image>
	  
	  <!-- 中间文字 -->
	  <view class="text-container">
		<text class="text-line first" :class="{ 'slide-in': showText }">不弃了，每天</text>
		<text class="text-line second" :class="{ 'slide-in': showText }">只学一点点</text>
	  </view>
	  
	  <!-- 右下角手势图标 -->
	  <image class="hand-icon right" 
			 :class="{ 'animate-right': showRight }" 
			 src="/static/images/hand.png" 
			 mode="aspectFit">
	  </image>
	  
	  <!-- 登录按钮 -->
	  <button class="login-btn" 
			  :class="{ 'fade-in': showBtn }" 
			  @tap="goToLogin">
		手机号登录
	  </button>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		showLeft: false,
		showRight: false,
		showText: false,
		showBtn: false
	  }
	},
	onLoad() {
	  this.startAnimation()
	},
	methods: {
	  startAnimation() {
		// 按顺序执行动画
		setTimeout(() => this.showLeft = true, 300)
		setTimeout(() => this.showRight = true, 600)
		setTimeout(() => this.showText = true, 900)
		setTimeout(() => this.showBtn = true, 1200)
	  },
	  goToLogin() {
		uni.navigateTo({
		  url: '/pages/login/login'
		})
	  }
	}
  }
  </script>
  
  <style lang="scss">
  .start-page {
	width: 100%;
	min-height: 100vh;
	background-color: #ffffff;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
  }
  
  .hand-icon {
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	opacity: 0;
	
	&.left {
	  left: 40rpx;
	  top: 40rpx;
	  transform: translateX(-100rpx);
	  
	  &.animate-left {
		animation: slideInLeft 0.6s ease forwards;
	  }
	}
	
	&.right {
	  right: 40rpx;
	  bottom: 200rpx;
	  transform: translateX(100rpx);
	  
	  &.animate-right {
		animation: slideInRight 0.6s ease forwards;
	  }
	}
  }
  
  .text-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 200rpx;
	
	.text-line {
	  font-size: 32rpx;
	  color: #333;
	  line-height: 1.8;
	  letter-spacing: 2rpx;
	  opacity: 0;
	  transform: translateY(20rpx);
	  
	  &.slide-in {
		animation: slideInUp 0.6s ease forwards;
	  }
	  
	  &.second {
		animation-delay: 0.2s;
	  }
	}
  }
  
  .login-btn {
	position: absolute;
	bottom: 80rpx;
	width: 240rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #5CD3D3;
	color: #ffffff;
	font-size: 28rpx;
	border-radius: 40rpx;
	text-align: center;
	opacity: 0;
	transform: translateY(20rpx);
	
	&.fade-in {
	  animation: fadeInUp 0.6s ease forwards;
	}
	
	&::after {
	  border: none;
	}
  }
  
  // 动画关键帧
  @keyframes slideInLeft {
	from {
	  opacity: 0;
	  transform: translateX(-100rpx);
	}
	to {
	  opacity: 1;
	  transform: translateX(0);
	}
  }
  
  @keyframes slideInRight {
	from {
	  opacity: 0;
	  transform: translateX(100rpx);
	}
	to {
	  opacity: 1;
	  transform: translateX(0);
	}
  }
  
  @keyframes slideInUp {
	from {
	  opacity: 0;
	  transform: translateY(20rpx);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  @keyframes fadeInUp {
	from {
	  opacity: 0;
	  transform: translateY(20rpx);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  </style> 